<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div class="app-container">
    <!-- 顶部logo区域 -->
    <div class="logo-area">
      <a href="https://vite.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>

    <!-- 导航菜单 -->
    <nav class="nav-menu">
      <RouterLink to="/pages/EchartsDemo" class="nav-link">ECharts示例</RouterLink>
      <RouterLink to="/pages/Table" class="nav-link">表格组件</RouterLink>
      <RouterLink to="/pages/ParentComponent" class="nav-link">父子组件传参</RouterLink>
    </nav>

    <!-- 路由视图 -->
    <div class="content-area">
      <RouterView />
    </div>

    <!-- 保留原有的HelloWorld组件 -->
    <HelloWorld msg="Vite + Vue" />
  </div>
</template>

<style scoped>
.app-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo-area {
  margin-bottom: 2rem;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.nav-menu {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.nav-link {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #213547;
  text-decoration: none;
  transition: background-color 0.3s;
}

.nav-link:hover {
  background-color: #e0e0e0;
}

.nav-link.router-link-active {
  background-color: #646cff;
  color: white;
}

.content-area {
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  min-height: 300px;
}
</style>